<template>
	<view class="you">
		<view class="you_container">
			<view class="you_container_top">
				<rui-icons icon="ai" color="var(--color)" size="40"></rui-icons>
				<view class="you_container_top_name">
					旅游助手
				</view>
			</view>
			<view class="you_container_container">
				<view class="you_container_container_content" :class="data.type">
					{{data.msg}}
				</view>
				<view class="you_container_container_idcard" v-if="data.type == 'search'">
					<view class="you_container_container_idcard_item" v-for="(item,index) in data.data.list"
						:key="index">
						<view class="you_container_container_idcard_item_box">
							<view class="you_container_container_idcard_item_box_label">
								身份证号：
							</view>
							<view class="you_container_container_idcard_item_box_value">
								{{item.idcard}}
							</view>
						</view>
						<view class="you_container_container_idcard_item_box">
							<view class="you_container_container_idcard_item_box_label">
								所在地区：
							</view>
							<view class="you_container_container_idcard_item_box_value">
								{{item.regions}}
							</view>
						</view>
						<view class="you_container_container_idcard_item_box">
							<view class="you_container_container_idcard_item_box_label">
								客人年龄：
							</view>
							<view class="you_container_container_idcard_item_box_value">
								{{item.age}}岁
							</view>
						</view>
						<view class="you_container_container_idcard_item_box">
							<view class="you_container_container_idcard_item_box_label">
								客人性别：
							</view>
							<view class="you_container_container_idcard_item_box_value">
								{{item.sex}}
							</view>
						</view>
					</view>
				</view>

				<view class="you_container_container_idcard" v-if="data.type == 'search2'">
					<view class="you_container_container_idcard_item" v-for="(item,index) in data.data.data"
						:key="index">
						<view class="you_container_container_idcard_item_box">
							<view class="you_container_container_idcard_item_box_label">
								客人姓名：
							</view>
							<view class="you_container_container_idcard_item_box_value">
								{{item.name}}
							</view>
						</view>
						<view class="you_container_container_idcard_item_box">
							<view class="you_container_container_idcard_item_box_label">
								身份证号：
							</view>
							<view class="you_container_container_idcard_item_box_value">
								{{item.idcode}}
							</view>
						</view>
						<view class="you_container_container_idcard_item_box">
							<view class="you_container_container_idcard_item_box_label">
								旅游线路：
							</view>
							<view class="you_container_container_idcard_item_box_value">
								{{item.itinerary}}
							</view>
						</view>
						<view class="you_container_container_idcard_item_box">
							<view class="you_container_container_idcard_item_box_label">
								出团日期：
							</view>
							<view class="you_container_container_idcard_item_box_value">
								{{item.date}}
							</view>
						</view>
					</view>
				</view>

				
				<view class="tips" v-if="data.tips">
					系统提示：{{data.tips}}
				</view>
				<view class="you_container_container_bar">
					<view class="you_container_container_bar_item" @click="read(data.msg)">
						<rui-icons icon="play" size="38"></rui-icons>
					</view>
					<!-- <view class="you_container_container_bar_item" @click="del(current)">
						<rui-icons icon="delete" size="38"></rui-icons>
					</view> -->
					<view class="you_container_container_bar_item" @click="copy(data.data.idcard)"
						v-if="data.data.idcard">
						<rui-icons icon="copy" size="38"></rui-icons>
					</view>
				<!-- 	<view class="you_container_container_bar_answer" @click="search(data.data.idcard, current)"
						v-if="data.data.idcard && data.status == 1">
						<rui-icons icon="answer" color="#666"></rui-icons>是否查询二次
					</view> -->
					<view class="you_container_container_bar_answer">
						微信：{{store.author}}
					</view>
				</view>
			</view>
		</view>
	</view>
	<rui-chat-side ref="refSide"></rui-chat-side>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		userStore,
		msgStore
	} from "@/store/index.js"
	import Push from "@/util/Push.js"

	let message = msgStore();
	let store = userStore();

	const push = new Push();

	let refSide = ref()
	defineProps({
		data: Object,
		current: Number
	})

	const copy = (data) => {

		uni.setClipboardData({
			data,
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'success',
					duration: 2000,
				});
			}
		});
	}

	const read = (text) => {
		const msg = new SpeechSynthesisUtterance();
		msg.text = text;
		msg.lang = 'zh-CN';
		window.speechSynthesis.speak(msg);
	}

	const search = (content, current) => {
		if (!store.etData.url || !store.etData.username || !store.etData.password) {
			uni.showModal({
				title: "系统提示",
				content: "您还未完善易途账号配置，现在是否去设置？",
				success(res) {
					if (res.confirm) {
						refSide.value.open()
					}
				}
			})
			return;
		}
		message.upStatus(current)
		message.add({
			content: "查询二次",
			type: 'search2',
			from: 'me',
		})
		push.send({
			content,
			et: store.etData
		}, 2)
	}
</script>


<style lang="scss" scoped>
	.warning {
		color: #f00;
	}
	.tips{
		margin-top: 30rpx;
		font-size: 24rpx;
		color: #999;
	}
	.you {
		margin: 20rpx;

		&_container {
			margin-bottom: 50rpx;

			&_top {
				margin: 20rpx 0;
				display: flex;
				align-items: center;

				&_name {
					font-weight: bold;
					font-size: 32rpx;
					margin-left: 15rpx;
				}
			}

			&_container {
				background: #fff;
				padding: 30rpx;
				border-top-right-radius: 30rpx;
				border-bottom-right-radius: 30rpx;
				border-bottom-left-radius: 30rpx;
				box-shadow: 0 3rpx 20rpx rgba(0, 0, 0, .03);

				&_idcard {
					margin-top: 30rpx;

					&_item {
						margin-top: 40rpx;

						&_box {
							display: flex;
							margin-top: 10rpx;

							&_label {
								color: #999;
							}

							&_value {
								width: calc(100% - 170rpx);
							}
						}
					}
				}

				&_bar {
					display: flex;
					margin-top: 40rpx;
					position: relative;

					&_answer {
						position: absolute;
						bottom: 0;
						right: 0;
						background: #eee;
						padding: 6rpx 20rpx 6rpx 10rpx;
						font-size: 24rpx;
						display: flex;
						align-items: center;
						border-radius: 50rpx;
						color: #666;
					}

					&_item {
						margin-right: 30rpx;
					}
				}
			}
		}
	}
</style>